<template>
  <div class="line_container">
    <div class="header">折线图</div>
    <div
      class="echart"
      ref="echart"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      let charts = this.$echarts.init(this.$refs['echart']);
      let option = {
        color: ['red'], //设置颜色
        title: {
          text: '销量', //标题展示
          textStyle: {
            color: '#6a9955', //标题颜色
            fontStyle: 'normal', //标题字体【italic（斜体）,normal（通用）】
          },
        },
        xAxis: {
          type: 'category', //类目轴
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],
          boundaryGap: false, //紧挨着Y轴
        },
        yAxis: {
          type: 'value', //数值轴，不需要指定【data】
          scale: true, //Y轴不是从0开始，从最小值开始
        },
        series: [
          {
            name: '苹果',
            type: 'line', //图表类型【bar,line,pie】
            data: [178, 160, 199, 155, 166, 130],
            smooth: true, //平滑效果
            stack: 'all', //数据堆叠（或者使用toolbox-feature-magicType-type:stack来实现效果）
            markPoint: {
              // 图表标注
              data: [
                //标注的数据数组
                {
                  type: 'max',
                  name: '最大值',
                },
                {
                  type: 'min',
                  name: '最小值',
                },
              ],
            },
            markLine: {
              //图表标线
              data: [
                //标线的数据数组
                {
                  name: '平均线', // 支持 'average', 'min', 'max'
                  type: 'average',
                },
              ],
            },
            markArea: {
              //标注区间
              data: [
                [{ xAxis: '一月' }, { xAxis: '二月' }],
                [{ xAxis: '四月' }, { xAxis: '五月' }],
              ],
            },
            lineStyle: {
              //线样式
              color: 'green', //线颜色
              type: 'dotted', //线格式【solid(实现)、dashed(虚线)、dotted(虚线 更密集)】
            },
            areaStyle: {
              //区域填充样式
              color: 'gold',
              opacity: 0.3,
            },
            label: {
              //标题
              show: true,
            },
          },
          {
            name: '苹果',
            type: 'line', //图表类型【bar,line,pie】
            data: [50, 70, 30, 10, 66, 77],
            smooth: true,
            stack: 'all', //数据堆叠
            areaStyle: {
              //区域填充样式
              color: 'skyblue',
              opacity: 0.7,
            },
            label: {
              //标题
              show: true,
            },
          },
        ],
      };
      charts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
$line_header_height: 30px;
.line_container {
  height: 100%;
  .header {
    height: $line_header_height;
    text-align: left;
    padding: 5px;
    background-color: gray;
  }
  .echart {
    height: calc(100% - $line_header_height);
    // background-color: red;
  }
}
</style>